<template>
    <div class="tx-all">
        <ul>
            <li class="flip-container" ontouchstart="this.classList.toggle('hover');">
                <div class="flipper">
                    <a href="#">
                        <div class="front"><img src="@/../static/4.jpg" alt=""></div>
                        <div class="back">
                            <img src="@/../static/6.jpg" alt="">
                        </div>
                    </a>
                </div>
            </li>
            <li>
                <a href="#">
                    <div><img src="@/../static/5.jpg" alt=""></div>
                    <div>
                         
                    </div>
                </a>
            </li>
            <li><a href="#">
                <img src="@/../static/6.jpg" alt=""></a>
            </li>
            <li><a href="#"><img src="@/../static/7.jpg" alt=""></a></li>
        </ul>
    </div>
</template>

<style>
body{
    font-size: 14px;
    font-family: Microsoft YaHei, Tahoma, Geneva, sans-serif;
    margin: 0;
    background: #111;
}
.tx-all{
    width: 100%;
    height: 300px;
    margin: 0 auto;
    background-color: #fcf;
}
.tx-all ul{
    list-style:none;
    width: 100%;
    height: 250px;
    margin: 150px auto;
    padding: 25px auto;
}
.tx-all ul li{
    float: left;
    height: 250px;
    margin-right: 40px;
    margin-top: 20px;
    background-color: #cfc;
}
.tx-all img{
    width: 250px;
    height: 250px;
}
.flip-container {
	perspective: 1000;
}
	/* flip the pane when hovered */
.flip-container:hover .flipper, .flip-container.hover .flipper {
		transform: rotateY(180deg);
}

.flip-container, .front, .back {
	width: 250px;
	height: 250px;
}

/* flip speed goes here */
.flipper {
	transition: 0.6s;
	transform-style: preserve-3d;

	position: relative;
}

/* hide back of pane during swap */
.front, .back {
	backface-visibility: hidden;

	position: absolute;
	top: 0;
	left: 0;
}

/* front pane, placed above back */
.front {
	z-index: 2;
}

/* back, initially hidden pane */
.back {
	transform: rotateY(180deg);
}
</style>

<script>
export default {
    data(){
        return{

        }
    },
    // methods:{
    //     var box = document.querySelector(".flip-container")
    // }
}
</script>

